<template>
	<div id="details" v-if="productInfo!=null">


		<!-- 主要内容 -->
		<div class="main">
			<!-- 头部 -->
			<div class="page-header">
				<div class="title">
					<p>{{productInfo.name}}</p>
					<div class="list">
						<ul>
							<li>
								<router-link to>概述</router-link>
							</li>
							<li>
								<router-link to>参数</router-link>
							</li>
							<li>
								<router-link to>用户评价</router-link>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 头部END -->

			<!-- 左侧商品轮播图 -->
			<div class="block">
				<img style="height:400px;" :src="productInfo.image" />
			</div>
			<!-- 左侧商品轮播图END -->

			<!-- 右侧内容区 -->
			<div class="content">
				<h1 class="name">{{productInfo.name}}</h1>
				<el-collapse accordion style="margin-top: 10px;">
					<el-collapse-item title="简介" name="2">
						<p class="intro">{{productInfo.description}}</p>
					</el-collapse-item>
				</el-collapse>
				<p class="store">作者：{{productInfo.author}}</p>
				<p class="store">风格：{{productInfo.style}}</p>
				<div class="price">
					<span>{{productInfo.price}} 元</span> <br />
					<span v-show="1==1">库存：{{productInfo.ware}} 件</span><br />
					数量：<el-input-number v-model="count" :min="1" :max="10" label="描述文字"></el-input-number>
				</div>
				<div class="pro-list">
					<span class="pro-name">小米</span>
					<span class="pro-price">
						<span>{{productInfo.price}}元</span>
					</span>
					<p class="price-sum">总计 : {{totalPrice}}元</p>
				</div>
				<!-- 内容区底部按钮 -->
				<div class="button">
					<el-button type="warning" @click="addShoppingCart">加入购物车</el-button>

					<div v-if="isLogin">
						<el-button @click="addCollect" style="margin-left: 50px;background-color: #E6A23C;" v-if="isCollect == 0">点击收藏</el-button>
						<el-button style="background-color: #EBB563;margin-left: 50px;" @click="addCollect" v-else>已收藏</el-button>
					</div>

					<el-button class="like" @click="goBuyNow">立即购买</el-button>
				</div>
				<!-- 内容区底部按钮END -->
				<div class="pro-policy">
					<ul>
						<li>
							<i class="el-icon-circle-check"></i> 小米自营
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 小米发货
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天无理由退货，那么少
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天价格保护，哈哈哈
						</li>
					</ul>
				</div>
			</div>
			<!-- 右侧内容区END -->
		</div>
	</div>
</template>

<script>
	import productAPI from '../api/product.js'
	import cartAPI from '../api/cart.js'
	import cart_itemAPI from 'api/cartItem.js';
	import collectApi from '../api/collect.js'

	import {
		mapActions
	} from "vuex";
	import {
		mapGetters
	} from "vuex";

	export default {
		name: "GoodDetail",

		activated() {
			console.log('router', this.$route);
			if (this.$route.query.productID != undefined) {
				this.productID = this.$route.query.productID;
				// 判断是否登录,没有登录则显示登录组件
				if (this.$store.getters.getUser) {
					this.isLogin = true
				}
			} else {
				this.notifyError('请选择商品')
				this.$router.replace("/goods")
			}
		},
		deactivated() {
			this.count = 1
		},
		watch: {
			// 监听商品id的变化，请求后端获取商品数据
			productID: function(val) {
				this.goodsDetails(val);
			}
		},

		computed: {
			...mapGetters(["getUser"]),
			totalPrice() {
				return (Number(this.count) * this.productInfo.price).toFixed(2)
			}
		},

		data() {
			return {
				productID: null,
				productInfo: null,
				isCollect: 0, // 默认未收藏
				count: 1,
				isLogin: false
			}
		},

		methods: {
			...mapActions(["unshiftShoppingCart", "addShoppingCartNum", "setShoppingCart"]),

			goodsDetails(val) {
				console.log(val)
				productAPI.getInfoById(parseInt(val)).then(res => {
					console.log(res);
					this.productInfo = res.product
					// 判断是否登录,没有登录则显示登录组件
					if (this.$store.getters.getUser) {
						this.getStar()
					}
				})
			},
			addShoppingCart() {
				var that = this
				// 判断是否登录,没有登录则显示登录组件
				if (!that.$store.getters.getUser) {
					that.$store.dispatch("setShowLogin", true);
					return;
				}
				const pd = {
					memberId: that.$store.getters.getUser.userId,
					productId: parseInt(that.productID),
					image: that.productInfo.image,
					productName: that.productInfo.name,
					count: that.count,
					itemTotalPrice: that.totalPrice
				}
				cartAPI.addCart(pd).then(response => {
					cart_itemAPI.getCartItemList(that.$store.getters.getUser.userId).then(res => {
						var itemList = []
						res.data.forEach((item, index) => {
							var price = (item.itemTotalPrice / item.count).toFixed(2)
							itemList.push(
								Object.assign({}, item, {
									'price': price,
									'check': true
								})
							)
						})
						that.setShoppingCart(itemList);
						console.log('itemList', itemList);
					})
					that.notifySucceed('加入购物车成功！');
				})
			},

			/**
			 * 详情页加载收藏状态 1是已收藏，0是未收藏,注意看参数
			 */
			getStar() {
				var user = this.$store.getters.getUser
				var userId = user.userId
				collectApi.getStar(userId, this.productID)
					.then(res => {
						this.isCollect = res.startStaus
					})
			},

			addCollect() {
				const collectParam = {
					memberId: this.$store.getters.getUser.userId,
					memberUsername: this.$store.getters.getUser.userName,
					productId: parseInt(this.productID),
					productName: this.productInfo.name,
				}
				collectApi.changeStar(collectParam, this.isCollect)
					.then(res => {
						this.isCollect = res.startStaus
						if (this.isCollect == 1) {
							this.notifySucceed('已收藏！')
						} else {
							this.notifySucceed('已取消！')
						}
					})
			},

			goBuyNow() {
				// 判断是否登录,没有登录则显示登录组件
				if (!this.$store.getters.getUser) {
					this.$store.dispatch("setShowLogin", true);
					return;
				}
				var orderItems = []
				const product = this.productInfo
				orderItems.push({
					"productId": product.id,
					"productName": product.name,
					"productImage": product.image,
					"count": this.count,
					"price": this.productInfo.price
				})
				this.$router.push({
					path: '/confirmOrder',
					query: {
						"orderItems": orderItems,
						"payAmount": this.totalPrice,
						"fromCart": false
					}
				})
			}
		}
	}
</script>

<style>
	/* 头部CSS */
	#details .page-header {
		height: 64px;
		margin-top: -20px;
		z-index: 4;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;
		-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
		box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
	}

	#details .page-header .title {
		width: 1225px;
		height: 64px;
		line-height: 64px;
		font-size: 18px;
		font-weight: 400;
		color: #212121;
		margin: 0 auto;
	}

	#details .page-header .title p {
		float: left;
	}

	#details .page-header .title .list {
		height: 64px;
		float: right;
	}

	#details .page-header .title .list li {
		float: left;
		margin-left: 20px;
	}

	#details .page-header .title .list li a {
		font-size: 14px;
		color: #616161;
	}

	#details .page-header .title .list li a:hover {
		font-size: 14px;
		color: #ff6700;
	}

	/* 头部CSS END */

	/* 主要内容CSS */
	#details .main {
		width: 1225px;
		height: 560px;
		padding-top: 30px;
		margin: 0 auto;
	}

	#details .main .block {
		float: left;
		width: 560px;
		height: 560px;
	}

	#details .el-carousel .el-carousel__indicator .el-carousel__button {
		background-color: rgba(163, 163, 163, 0.8);
	}

	#details .main .content {
		float: left;
		margin-left: 25px;
		width: 640px;
	}

	#details .main .content .name {
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		font-weight: normal;
		color: #212121;
	}

	#details .main .content .intro {
		color: #b0b0b0;
		padding-top: 10px;
	}

	#details .main .content .store {
		color: #ff6700;
		padding-top: 10px;
	}

	#details .main .content .price {
		display: block;
		font-size: 18px;
		color: #ff6700;
		border-bottom: 1px solid #e0e0e0;
		padding: 25px 0 25px;
	}

	#details .main .content .price .del {
		font-size: 14px;
		margin-left: 10px;
		color: #b0b0b0;
		text-decoration: line-through;
	}

	#details .main .content .pro-list {
		background: #f9f9fa;
		padding: 30px 60px;
		margin: 50px 0 50px;
	}

	#details .main .content .pro-list span {
		line-height: 30px;
		color: #616161;
	}

	#details .main .content .pro-list .pro-price {
		float: right;
	}

	#details .main .content .pro-list .pro-price .pro-del {
		margin-left: 10px;
		text-decoration: line-through;
	}

	#details .main .content .pro-list .price-sum {
		color: #ff6700;
		font-size: 24px;
		padding-top: 20px;
	}

	#details .main .content .button {
		height: 55px;
		margin: 10px 0 20px 0;
	}

	#details .main .content .button .el-button {
		float: left;
		height: 55px;
		font-size: 16px;
		color: #fff;
		border: none;
		text-align: center;
	}

	#details .main .content .button .shop-cart {
		width: 340px;
		background-color: #ff6700;
	}

	#details .main .content .button .shop-cart:hover {
		background-color: #f25807;
	}

	#details .main .content .button .like {
		width: 260px;
		margin-left: 40px;
		background-color: #eb7b7b;
	}

	#details .main .content .button .like:hover {
		background-color: #eb3c3c;
	}

	#details .main .content .pro-policy li {
		float: left;
		margin-right: 20px;
		color: #b0b0b0;
	}

	/* 主要内容CSS END */
</style>
